<template>
  <div class="search">
    <home-menu v-on:childByValue="childByValue" style="max-width:750px;margin:0 auto;"></home-menu>
    <div class="search-input">
      <p class="search-input-p">{{str}}</p>

      <input type="text" placeholder="请输入搜索词"/>
      <img class="search-input-img" id="id" src="static/imgs/home-btn.png" @click="homeBtn(id)"/>
    </div>
    <div class="search-tit">
      <ul class="search-tit-ul">
        <li class="search-tit-li" v-for="(item,index) in lis">
          <router-link :to="{path:'/ruleLaw',query:{id:0}}">
            <p class="tit-li-p">{{item.lisP}}</p>
            <span class="tit-li-span">{{item.time}}</span>
          </router-link>
        </li>
      </ul>
      <div class="search-footer">
        <p class="search-footer-p">
          <a href="javascript:(0)">查看更多</a>
          <img src="static/imgs/search-xia.png"/>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import homeMenu from '@/pages/home/menu'
    export default {
      name: "search",
      props:["data"],
      data(){
        return {
          id:1,
          str:'',
          lis:[
            {
              lisP:"开设“法治讲坛” 推进法治化进程",
              time:"2019-06-13",
              id:0
            },
            {
              lisP:"司法局组织开展丰富多彩的“4.15”全民国家安…",
              time:"2019-06-13",
              id:1
            },
            {
              lisP:"司前司法所开展国家安全普法进校园",
              time:"2019-06-13",
              id:2
            },
            {
              lisP:"司法局法律服务志愿者开展“4.15国家安全教…",
              time:"2019-06-13",
              id:3
            },
            {
              lisP:"岚谷乡开展平安校园建设宣传演练活动…",
              time:"2019-06-13",
              id:4
            },
            {
              lisP:"司法所开展公共交通安全法治宣传",
              time:"2019-06-13",
              id:5
            },
            {
              lisP:"全面开展移风易俗、文明祭扫清明节安全法治…",
              time:"2019-06-13",
              id:6
            },
            {
              lisP:"祖墩司法所开展法治宣传活动",
              time:"2019-06-13",
              id:7
            },
            {
              lisP:"司法所开展公共交通安全法治宣传",
              time:"2019-06-13",
              id:8
            },
            {
              lisP:"全面开展移风易俗、文明祭扫清明节安全法治…",
              time:"2019-06-13",
              id:9
            },
            {
              lisP:"祖墩司法所开展法治宣传活动",
              time:"2019-06-13",
              id:10
            },
            {
              lisP:"司法所开展公共交通安全法治宣传",
              time:"2019-06-13",
              id:11
            },
            {
              lisP:"全面开展移风易俗、文明祭扫清明节安全法治…",
              time:"2019-06-13",
              id:12
            },
            {
              lisP:"祖墩司法所开展法治宣传活动",
              time:"2019-06-13",
              id:13
            },
          ]
        }
      },
      components: {
        homeMenu
      },
      created(){

      },
      methods:{//
        homeBtn(i){
          i++;
          this.id = i;
          if(i%2 == 0){
            document.querySelector(".home-menu").style.display="block";
            document.querySelector(".search-input-img").style.zIndex="1111"
          }else{
            document.querySelector(".home-menu").style.display="none";
          }

        },
        childByValue: function (childValue) {
          this.str = childValue.name
          if((this.str).length>4){
            this.str = this.str.substring(0,4)
          }
        }

      },
      mounted(){

        this.str = this.$route.query.str||'法制要闻'
        if((this.str).length>4){
          this.str = this.str.substring(0,4)
        }

      }
    }
</script>

<style scoped lang="scss">
  .search{

    max-width:750px;
    margin: 0 auto;    background:#F8F8F8;
    .search-input{
      display:flex;
      align-items: center;
      background:#33568D;
      height:4rem;
      padding:0 1rem;
      justify-content:space-between;
      p{
        font-size:1.5rem;
        color:white;
        line-height:2.1rem;
      }
      input{
        width:21rem;
        height:2.7rem;
        background:white;
        font-size: 1.3rem;
        line-height:3rem;
        text-indent: 1rem;
        border:none;
        border-radius: .5rem;
      }
      img{
        display:block;
        width:1.6rem;
        height:1.6rem;
      }
    }
    .search-tit{
      width:100%;
      .search-tit-ul{
        padding:0 1.8rem;
        .search-tit-li{
          border-bottom:.1rem dotted #979797;
          padding:1rem 0;
          p{
            font-size:1.4rem;
            line-height:2rem;
            color:#333333;
            width: 33rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          span{
            display: block;
            font-size:1.2rem;
            color:#999999;
            line-height:1.6rem;
            margin-top:.3rem;
          }
        }
        .search-tit-li:last-child{
          border:none;
        }
      }
      .search-footer{
        padding-bottom:1rem;
        .search-footer-p{
          display:flex;
          justify-content: center;
          align-items: center;
          a{
            font-size: 1.4rem;
            line-height:2rem;
            color:#ABABAB;
            display: block;
          }
          img{
            display: block;
            width:1.3rem;
            height:1.3rem;
            margin-left:.75rem;
          }
        }
      }
    }
  }
</style>
